<template>
  <div class="dome_Einvoice">
    <div class="RBperson">
      <div>
        <div class="RBperson_l">
          <div class="RBperson_l_user">报销人：苏伦</div>
          <div class="RBperson_l_id">ID:001001</div>
        </div>
        <div class="RBperson_r">
          <div>苏伦</div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="RBperson_selsected">
          <el-select v-model="company" placeholder="选择所属公司" style="width:100%">
            <el-option
              v-for="item in companyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
      </div>
      <div class="RBperson_pic">
        <div class="pic_l fl">
          <img src="@/img/smbx.png" alt="" style='margin-bottom: 10px' @click='handlerScanning'>
          <p style='text-align: center'>扫描报销</p>
        </div>
        <div class="pic_r">
          <img src="@/img/sdbx.png" alt="" style='margin-bottom: 10px'>
          <p style="text-align: center">手动报销</p>
        </div>
      </div>
    </div>
    <div class="MyInvoice">
      <div class="MyInvoice_h">
        <span style="font-weight: bold;">我的发票</span>
        <span class="iconfont icon-youbian fr ico"></span>
      </div>
      <div>
        <div style='margin-bottom: 20px'>
          <span>发票数量合计（张）</span> 
          <span class="fr">1</span>
        </div>
        <div>
          <span>发票含税金额合计（元）</span>
          <span  class="fr">816.15</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Einvoice',
  components:{

  },
  data(){
    return {
      company:'',
      companyList:[
        {
          value:0,
          label:'恒企',
        },
        {
          value:1,
          label:'新东方'
        },
        {
          value:2,
          label:'华为'
        },
        {
          value:3,
          label:'百度'
        },
        {
          value:4,
          label:'百度'
        }
      ]
    }
  },
  methods: {
    checkCom(){

    },
    // 扫描
    handlerScanning(){

    }
  },
}
</script>

<style lang="scss" scoped>
  .dome_Einvoice{
    padding: 30px 30px 0px 30px;
    letter-spacing:2px;
    .RBperson{
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 2px #888888;
      .RBperson_l{
        margin-top: 0.3rem;
        float: left;
        .RBperson_l_user{
          font-size: .32rem;
          font-weight: bold;
          margin-bottom: .2rem;
        }
        .RBperson_l_id{
          font-size: .28rem;
        }
      }
      .RBperson_r{
        font-size: .32rem;
        width: 1.3rem;
        height: 1.3rem;
        text-align: center;
        line-height: 1.3rem;
        border-radius: 50%;
        color: #fff;
        background-color: #3197fc;
        float: right;
      }

      .RBperson_selsected{
        margin-top: 0.3rem;
        .selectedCom{
          box-sizing: border-box;
          width: 100%;
          height: .7rem;
          border: 1px solid #e4e4e4;
          border-radius: 11px;
          padding-left: 25px;
        }
      }
      .RBperson_pic{
        display: flex;
        /* margin-top: 30px; */
        padding-top: 0.6rem;
        justify-content:center;
        img{
          width: 1.76rem;
          height: 1.76rem;
        }
        .pic_l{
          margin-left: .15rem;
          margin-right: .50rem;
        }
      }
    }
    .MyInvoice{
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      padding: 20px 20px 20px 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 2px #888888;
      margin-top: .5rem;
      .MyInvoice_h{
        padding: 20px 0;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom:20px;
        .ico{
          font-size: 0.5rem;
          color: #e5e5e5;
        }
      }
    }
    .fl {
      float: left;
      display: block;
    }
    .fr {
      float: right;
    }
  }
</style>
